<template>
	<view class="home-container">
		<!-- 顶部轮播图 -->
		<view class="swiper-section">
			<swiper 
				class="swiper" 
				circular 
				autoplay 
				:indicator-dots="true"
				indicator-active-color="white"
				indicator-color="rgba(255, 255, 255, .6)"
				interval="3000" 
				duration="500"
			>
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src="item.imageUrl" mode="aspectFill"></image>
						<view class="overlay"></view>
					
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 核心数据看板 -->
		<view class="dashboard">
			<view class="dashboard-item water-remain">
				<view class="water-remain-header">
					<text class="title">剩余水量</text>
					<text class="value">{{waterRemain}}</text>
				</view>
				<view class="progress-container">
					<u-line-progress
						:percentage="waterRemainPercentage"
						:showText="false"
						height="20"
						activeColor="#1296db"
					></u-line-progress>
				</view>
			</view>
			<view class="dashboard-item monthly-usage">
				<text class="title">月度消耗</text>
				<view class="usage-info">
					<text class="value">{{monthlyUsage}}升</text>
					<text class="compare" :class="usageCompare > 0 ? 'up' : 'down'">
						较上月{{usageCompare > 0 ? '增长' : '减少'}}{{Math.abs(usageCompare)}}%
					</text>
				</view>
			</view>
			<view class="dashboard-item water-quality">
				<text class="title">水质状态</text>
				<view class="quality-indicator">
					<view class="dot" :class="qualityStatus"></view>
					<text>{{qualityText}}</text>
				</view>
			</view>
		</view>

		<!-- 快捷服务入口 -->
		<view class="quick-services">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(service, index) in quickServices" :key="index" @click="handleService(service.type)">
					<u-icon :name="service.icon" size="35"></u-icon>
					<text class="grid-text">{{service.name}}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 动态提示区 -->
		<view class="notice-section">
			<view class="notice-item quality-countdown">
				<u-icon name="clock" size="24"></u-icon>
				<text>距离下次水质检测还有{{nextCheckDays}}天</text>
			</view>
			<view class="notice-item current-plan">
				<u-icon name="star" size="24"></u-icon>
				<text>当前套餐：{{currentPlan}}</text>
			</view>
			<view class="notice-item water-tips">
				<u-icon name="info-circle" size="24"></u-icon>
				<text>{{waterTip}}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 轮播图数据
			bannerList: [
				{ imageUrl: '/static/images/banner1.png', title: 'Banner 1' },
				{ imageUrl: '/static/images/banner2.png', title: 'Banner 2' },
				{ imageUrl: '/static/images/banner3.png', title: 'Banner 3' }
			],
			// 核心数据
			waterRemain: 150,
			waterTotal: 200,
			monthlyUsage: 50,
			usageCompare: -5,
			qualityStatus: 'good', // good, warning, danger
			
			// 快捷服务
			quickServices: [
				{ name: '安装', icon: 'setting', type: 'install' },
				{ name: '维修', icon: 'error-circle', type: 'repair' },
				{ name: '移机', icon: 'arrow-right', type: 'move' },
				{ name: '换芯保养', icon: 'reload', type: 'maintenance' },
				{ name: '紧急报障', icon: 'warning', type: 'emergency' },
				{ name: '立即购水', icon: 'shopping-cart', type: 'purchase' },
				{ name: '账单查询', icon: 'file-text', type: 'bill' },
				{ name: '检测报告', icon: 'file-text', type: 'report' }
			],
			
			// 动态提示
			nextCheckDays: 7,
			currentPlan: '年度无忧套餐',
			waterTip: '小贴士：定期清洗水箱可以保持水质清新'
		}
	},
	computed: {
		waterRemainPercentage() {
			return (this.waterRemain / this.waterTotal) * 100
		},
		qualityText() {
			const statusMap = {
				good: '优',
				warning: '一般',
				danger: '差'
			}
			return statusMap[this.qualityStatus]
		}
	},
	methods: {
		handleService(type) {
			const routeMap = {
				install: '/pages/home/install/index',
				repair: '/pages/home/repair/index',
				move: '/pages/home/move/index',
				maintenance: '/pages/home/maintenance/index',
				emergency: '/pages/home/emergency/index',
				purchase: '/pages/purchase/index',
				bill: '/pages/mine/monthly-bill/index',
				report: '/pages/home/report/index'
			}
			
			if (routeMap[type]) {
				uni.navigateTo({
					url: routeMap[type]
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.home-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 30rpx;

	.swiper-section {
		height: 360rpx;
		margin: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		
		.swiper {
			height: 100%;
			
			.swiper-item {
				position: relative;
				width: 100%;
				height: 100%;
				
				image {
					width: 100%;
					height: 100%;
				}
				
				.overlay {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 160rpx;
					background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
				}
				
				.content {
					position: absolute;
					bottom: 80rpx;
					left: 30rpx;
					right: 30rpx;
					z-index: 1;
					
					.title {
						color: #ffffff;
						font-size: 32rpx;
						font-weight: 500;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
					}
				}
			}
		}
	}

	.dashboard {
		margin: 20rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		
		.dashboard-item {
			background: #ffffff;
			border-radius: 24rpx;
			padding: 30rpx;
			position: relative;
			overflow: hidden;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
			
			&.water-remain {
				grid-column: 1 / -1;
				
				.water-remain-header {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin-bottom: 30rpx;
					
					.title {
						font-size: 32rpx;
						color: #333;
						font-weight: 600;
						position: relative;
						padding-left: 20rpx;
						
						&::before {
							content: '';
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 6rpx;
							height: 24rpx;
							background: #1296db;
							border-radius: 3rpx;
						}
					}
					
					.value {
						font-size: 48rpx;
						color: #1296db;
						font-weight: 700;
						line-height: 1;
						
						&::after {
							content: '升';
							font-size: 24rpx;
							margin-left: 8rpx;
							color: #999;
						}
					}
				}
				
				.progress-container {
					position: relative;
					padding: 15rpx 0;
					margin-top: 20rpx;
				}
			}
			
			&.monthly-usage {
				.title {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 20rpx;
					font-weight: 500;
				}
				
				.usage-info {
					display: flex;
					flex-direction: column;
					gap: 15rpx;
					
					.value {
						font-size: 44rpx;
						color: #333;
						font-weight: 700;
						
						&::after {
							content: '升';
							font-size: 24rpx;
							margin-left: 8rpx;
							color: #999;
						}
					}
					
					.compare {
						display: inline-flex;
						align-items: center;
						font-size: 24rpx;
						padding: 8rpx 16rpx;
						border-radius: 30rpx;
						width: fit-content;
						
						&.up {
							color: #ff4d4f;
							background: rgba(255, 77, 79, 0.08);
							
							&::before {
								content: '↑';
								margin-right: 4rpx;
							}
						}
						
						&.down {
							color: #52c41a;
							background: rgba(82, 196, 26, 0.08);
							
							&::before {
								content: '↓';
								margin-right: 4rpx;
							}
						}
					}
				}
			}
			
			&.water-quality {
				.title {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 20rpx;
					font-weight: 500;
				}
				
				.quality-indicator {
					display: flex;
					align-items: center;
					gap: 16rpx;
					
					.dot {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						position: relative;
						
						&::after {
							content: '';
							position: absolute;
							top: -4rpx;
							left: -4rpx;
							right: -4rpx;
							bottom: -4rpx;
							border-radius: 50%;
							animation: pulse 2s infinite;
						}
						
						&.good {
							background-color: #52c41a;
							&::after {
								border: 2rpx solid rgba(82, 196, 26, 0.3);
							}
						}
						
						&.warning {
							background-color: #faad14;
							&::after {
								border: 2rpx solid rgba(250, 173, 20, 0.3);
							}
						}
						
						&.bad {
							background-color: #ff4d4f;
							&::after {
								border: 2rpx solid rgba(255, 77, 79, 0.3);
							}
						}
					}
					
					text {
						font-size: 36rpx;
						color: #333;
						font-weight: 600;
					}
				}
			}
		}
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}
		50% {
			transform: scale(1.3);
			opacity: 0.5;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.quick-services {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		
		.grid-text {
			font-size: 24rpx;
			color: #333;
			margin-top: 5rpx;
			margin-bottom: 15rpx;
		}
	}

	.notice-section {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		
		.notice-item {
			display: flex;
			align-items: center;
			padding: 16rpx 15rpx;
			background-color: #fff;
			margin-bottom: 16rpx;
			border-radius: 8rpx;
			text {
				margin-left: 16rpx !important;  
				font-size: 28rpx;
				color: #333;
			}
		}
	}
}
</style>
